<template>
  <div class="form-card-container">
    <div
      v-if="projectList.length"
      class="form-list-wrap"
    >
      <div
        v-for="p in projectList"
        :key="p.id"
        class="form-item-card"
      >
        <!--    文件夹-->
        <div
          v-if="p.type == '3'"
          class="form-card"
        >
          <div
            class="body"
            @click="$emit('enterFolder', p)"
          >
            <el-row
              align="middle"
              justify="center"
              type="flex"
              class="body-file"
            >
              <div class="body-file-picture">
                <div class="folder-icon-wrapper">
                  <img
                    src="~@/assets/images/form/icon4.png"
                    class="folder-img"
                  />
                  <img
                    src="~@/assets/images/form/icon4open.png"
                    class="folder-img-open"
                  />
                </div>
              </div>
              <el-col
                :span="12"
                class="body-file-name"
              >
                <el-tooltip
                  :content="p.textName"
                  placement="top"
                >
                  <span class="body-file-title">
                    {{ p.textName }}
                  </span>
                </el-tooltip>
                <div class="card-time-div">
                  <span class="card-time">{{ $t("client.card.updateTime") }}：{{ formatDateFilter(p.createTime) }}</span>
                </div>
              </el-col>
            </el-row>
            <div class="btns">
              <el-button
                link
                size="small"
                @click.stop="$emit('renameFolder', p)"
              >
                <el-icon><ele-Edit /></el-icon>
              </el-button>
              <el-popconfirm
                :title="$t('client.card.delFolderText')"
                @confirm="deleteForm(p.formKey)"
              >
                <template #reference>
                  <el-button
                    link
                    size="small"
                    @click.stop="() => {}"
                  >
                    <el-icon><ele-Delete /></el-icon>
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </div>
        </div>
        <!--		普通表单			-->
        <div
          v-else
          class="move form-card"
        >
          <div class="body">
            <div class="body-form">
              <div class="body-form-picture">
                <img
                  :src="getFormImageSrc(p)"
                  class="form-img"
                />
              </div>
              <el-row
                align="middle"
                justify="center"
                type="flex"
                class="body-form-card"
              >
                <el-col>
                  <el-tooltip
                    effect="dark"
                    :content="p.textName"
                    placement="top"
                  >
                    <span
                      @click="toProjectHandle(p, 'editor/index')"
                      class="title form-card-title"
                    >
                      {{ p.textName }}
                    </span>
                  </el-tooltip>
                </el-col>
                <div
                  @click="toProjectHandle(p, 'editor/index')"
                  class="card-time-div"
                >
                  <span class="card-time">{{ $t("client.card.createTime") }}：{{ formatDateFilter(p.createTime) }}</span>
                </div>
                <div
                  class="card-time-div card-user-div"
                  @click="toProjectHandle(p, 'editor/index')"
                  v-if="p.createUserName"
                >
                  <span class="card-time">{{ $t("client.card.createBy") }}：{{ p.createUserName }}</span>
                </div>
              </el-row>
              <div class="status">
                <span
                  class="status-name"
                  v-show="p.type !== 6"
                  :style="tagStyleMap[p.status]"
                >
                  {{ getFormStatusName(p.status).statusName }}
                </span>
                <span
                  @click="toProjectHandle(p, 'data')"
                  v-if="p.collectionCount"
                  class="count-to-data"
                >
                  {{ p.collectionCount }} {{ $t("client.card.numText") }}
                </span>
              </div>
            </div>
            <div class="btns">
              <el-button
                link
                size="small"
                :disabled="isAuthDisabled(p, 'edit', type)"
                @click="toProjectHandle(p, 'editor/index')"
                @contextmenu.prevent="toProjectHandle(p, 'editor/index', true)"
              >
                <el-icon><ele-Edit /></el-icon>
              </el-button>
              <el-button
                link
                size="small"
                :disabled="isAuthDisabled(p, 'setting', type)"
                @click="toProjectHandle(p, 'setting')"
              >
                <el-icon><ele-Setting /></el-icon>
              </el-button>
              <el-button
                link
                size="small"
                :disabled="isAuthDisabled(p, 'publish', type)"
                @click="publishForm(p)"
                v-if="p.status != 2 && p.type != 6"
              >
                <el-icon><ele-Promotion /></el-icon>
              </el-button>
              <el-button
                link
                size="small"
                :disabled="isAuthDisabled(p, 'publish', type)"
                v-if="p.status == 2 && p.type != 6"
                @click="stopProject(p)"
              >
                <el-icon><ele-VideoPause /></el-icon>
              </el-button>
              <el-button
                link
                size="small"
                :disabled="isAuthDisabled(p, 'data', type)"
                @click="toProjectHandle(p, 'data')"
                @contextmenu.prevent="toProjectHandle(p, 'data', true)"
              >
                <el-icon><ele-DataAnalysis /></el-icon>
              </el-button>
              <el-button
                link
                size="small"
                @click="openFormInNewTab(p)"
              >
                <el-icon><ele-Share /></el-icon>
              </el-button>
              <el-dropdown
                trigger="hover"
                :teleported="false"
                @visible-change="
                  val => {
                    handleBtnShowIcon(p, val);
                  }
                "
              >
                <el-button
                  class="btns-more"
                  link
                  size="small"
                >
                  <ele-ArrowDown
                    v-if="p.showBtn"
                    style="width: 1em; height: 1em"
                  />
                  <ele-MoreFilled
                    v-else
                    style="width: 1em; height: 1em"
                  />
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu class="btns-more-down">
                    <el-dropdown-item
                      v-if="p.status != 2 && !type"
                      @click="deleteFrom(p.formKey)"
                    >
                      <el-icon><ele-Delete /></el-icon>
                      {{ $t("client.card.delete") }}
                    </el-dropdown-item>
                    <el-dropdown-item
                      :disabled="isAuthDisabled(p, 'board', type)"
                      @click="toProjectHandle(p, 'statistics')"
                      @contextmenu.prevent="toProjectHandle(p, 'statistics', true)"
                    >
                      <el-icon><ele-DataAnalysis /></el-icon>
                      {{ $t("client.card.statistics") }}
                    </el-dropdown-item>
                    <el-dropdown-item
                      :disabled="isAuthDisabled(p, 'board', type)"
                      @click="toProjectHandle(p, 'statistics', false, { tn: 'analysis' })"
                      @contextmenu.prevent="toProjectHandle(p, 'statistics', true, { tn: 'analysis' })"
                    >
                      <el-icon><ele-PieChart /></el-icon>
                      {{ $t("client.card.analysis") }}
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="!type"
                      @click="
                        e => {
                          emit('move', p);
                        }
                      "
                    >
                      <el-icon><ele-Position /></el-icon>
                      {{ $t("client.card.move") }}
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="!type"
                      @click="
                        e => {
                          emit('sortTop', p, true);
                        }
                      "
                    >
                      <el-icon><ele-Top /></el-icon>
                      {{ $t("client.card.sortTop") }}
                    </el-dropdown-item>
                    <el-dropdown-item
                      @click="handleCopyForm(p)"
                      v-if="!type"
                      size="small"
                    >
                      <el-icon><ele-DocumentCopy /></el-icon>
                      {{ $t("client.card.copy") }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <el-empty :description="$t('client.card.noData')" />
    </template>
  </div>
</template>

<script setup name="FormCardList">
import { useForm } from "./useFormHook";
import { ElMessageBox } from "element-plus";
import ordinary from "@/assets/images/form/ordinary.png";
import exam from "@/assets/images/form/exam.png";
import flow from "@/assets/images/form/flow.png";
import MarktingPng from "@/assets/images/form/markting.png";
import EvalPng from "@/assets/images/form/eval.svg";

import { i18n } from "@/i18n";

const emit = defineEmits(["enterFolder", "renameFolder", "move", "refresh", "sortTop"]);

const props = defineProps({
  projectList: {
    type: Array,
    default: () => {
      return [];
    }
  },
  // 我的表单页还是协作页区分 默认为表单页 协作页某些内容不显示
  type: {
    type: String,
    default: ""
  }
});

const {
  projectStatusList,
  logicDeleteForm,
  formatDateFilter,
  toProjectHandle,
  handleCopyForm,
  stopProject,
  publishForm,
  deleteForm,
  isAuthDisabled
} = useForm(emit, props);

const getFormImageSrc = p => {
  const type = p.type;
  if (type === 1) {
    return ordinary;
  } else if (type === 4) {
    return exam;
  } else if (type === 2) {
    return flow;
  } else if (type === 5) {
    return MarktingPng;
  } else if (type === 6) {
    return EvalPng;
  } else {
    return ordinary;
  }
};

const handleBtnShowIcon = (p, show) => {
  p.showBtn = show;
};

const getFormStatusName = code => {
  let name = projectStatusList.find(item => item.code == code).name;
  let statusColor = projectStatusList.find(item => item.code == code).color;
  return {
    statusName: name,
    color: statusColor
  };
};

const tagStyleMap = {
  1: {
    color: "#2754F5",
    backgroundColor: "#EEF3FE"
  },
  2: {
    color: "#439769",
    backgroundColor: "#EDF8F4"
  },
  3: {
    color: "#79808B",
    backgroundColor: "#F2F3F8"
  }
};

const deleteFrom = key => {
  ElMessageBox.confirm(i18n.global.t("client.card.isDelete"), i18n.global.t("formI18n.all.waring"), {
    confirmButtonText: i18n.global.t("formI18n.all.confirm"),
    cancelButtonText: i18n.global.t("formI18n.all.cancel"),
    type: "warning"
  })
    .then(() => {
      logicDeleteForm(key);
    })
    .catch(() => {});
};

const openFormInNewTab = (p) => {
  window.open(`/s/${p.formKey}`, '_blank');
};
</script>

<style lang="scss" scoped>
.form-card-container {
  width: 100%;
  margin: 20px auto;

  .form-list-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
  }

  .form-card {
    height: 170px;
    box-shadow: none;
    margin: 6px;
    --el-card-border-radius: 4px;
    --el-card-padding: 20px;
    --el-card-bg-color: var(--el-fill-color-blank);
    background-color: var(--el-card-bg-color);
    border: 1px solid var(--el-card-border-color);
    color: var(--el-text-color-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px !important;
    overflow: visible !important;
    position: relative;

    &:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 24px 0 rgba(39,84,245,0.12), 0 2px 8px 0 rgba(0,0,0,0.05);
      z-index: 2;
      .folder-img {
      opacity: 0.7;
      transform: scale(0.9);
    }

    .folder-img-open {
      opacity: 1;
    }
    }

    .body {
      width: 305px;
      height: 170px;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      transition: all 0.3s ease;
    }

    .body-file {
      display: flex;
    }

    .body-form {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  .body-form:hover {
    .form-card-title {
      color: var(--el-color-primary);
    }

    .card-time {
      color: var(--el-color-primary);
    }
    
  }

  .body-file:hover {
    cursor: pointer;

    .body-file-title {
      color: var(--el-color-primary);
    }

    .card-time {
      color: var(--el-color-primary);
    }


  }

  .form-item-card {
    margin-bottom: 10px;
    margin-left: 25px;
    text-align: left;

    .form-type {
      color: white;
      font-size: 11px;
      padding: 3px 5px;
      border-radius: 5px;
    }

    .status {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .status-name {
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0;
      text-align: center;
      padding: 2px;
      width: 55px;
      height: 18px;
      background-color: #ccc;
      border-radius: 9px;
      margin-bottom: 5px;
      line-height: 14px;
      // 超出隐藏
      overflow: hidden;
    }

    .title {
      color: rgb(68, 66, 66);
      font-size: 16px;
      text-align: left;
      font-weight: 500;
      margin-left: 10px;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      max-width: 100%;
      line-height: 27px;
    }

    .card-time {
      color: rgba(144, 147, 153, 100);
      text-align: center;
      font-size: 10px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0;
      color: #848484;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: clip;
      width: 80%;
    }

    .time {
      color: rgba(144, 147, 153, 100);
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      margin: 0;
    }

    img {
      width: 143px;
      height: 121px;
    }

    .body-file-picture {
      width: 55px;
      height: 55px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .folder-icon-wrapper {
      position: relative;
      width: 62px;
      height: 53px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .folder-img {
      width: 62px;
      height: 53px;
      display: inline-block;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 1;
    }

    .folder-img-open {
      position: absolute;
      top: 0;
      left: 0;
      width: 62px;
      height: 53px;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .body-form-picture {
      width: 52px;
      height: 52px;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;

      .form-img {
        width: 38px;
        height: 38px;
        display: inline-block;
      }
    }

    .body-form-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .form-card-title {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0;
      color: #3d3d3d;
      margin-left: 0;
      width: 115px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }

    .form-card-title:hover {
      color: var(--el-color-primary);
    }

    .count-to-data:hover {
      color: var(--el-color-primary);
    }

    .body-file-name {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
    }

    .body-file-title {
      font-size: 16px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0;
      color: #3d3d3d;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .card-user-div {
      max-width: 150px;
      overflow: hidden;
    }

    .folder-img + .time {
      margin-top: 20px;
    }

    .el-button--medium {
      margin-left: 5px !important;
    }

    .split-div {
      width: 100%;
      height: 1px;
      border-top: 1px var(--el-border-color) var(--el-border-style);
      margin: 10px 0;
    }

    .btns {
      color: rgba(144, 147, 153, 100);
      text-align: center;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 10px;

      .el-button {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;

        .el-icon {
          font-size: 16px;
        }
      }
    }

    .btns:hover {
      text-align: center;
      display: flex;
      justify-content: space-around;
    }

    .el-button:hover {
      color: #4c4edb;
      background-color: #eef3fe;
      transition-duration: 0.3s;
    }

    .btns-more-down {
      :deep(.el-dropdown-menu__item) {
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        
        .el-icon {
          font-size: 14px;
        }
      }
    }

    :deep(.el-divider--vertical) {
      height: 1em;
      margin: 0 4px;
    }
  }
}

@media screen and (max-width: 1500px) {
  .body {
    width: 249px !important;
  }
}

@media screen and (min-width: 1900px) {
  .form-item-card {
    margin-bottom: 10px;
    margin-left: 55px !important;
    text-align: left;
  }
}

.status-folder .el-icon {
  font-size: 16px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
